/**
 * 小数点后面保留几位
 *
 * @param x 做近似数处理的数
 * @param n 小数点后第几位
 * @returns 近似后的数
 */
function roundF(x,n){
  return Math.round(x * Math.pow(10,n)) / Math.pow(10,n);
};

$(()=>{
  //get dom elem
  var $width = $('#width'),
      $height = $('#height'),
      $calc = $('#calc'),
      $perimeter = $('#perimeter'),
      $area = $('#area');
  //button
  $calc.click(()=>{
    //检验
    if(!validate('#width') || !validate('#height')) return;
    //检验出错就返回

    //get value
    var w = Number($width.val()),
         h = Number($height.val());
    //计算
    var p = 2 * (w + h),
        a = w * h;

    $perimeter.val(roundF(p,1));
    $area.val(roundF(a,2));
    
  });

  //字符检验
  //1、事件
  //2、事件参数得到按键的值  键值e.key  文本框的值e.target.value
  //3、非法的字符要屏蔽   非法字符不让显示： e.preventDefault()会打断正常流程

  $width.keypress(function(e) {
    if(!ilegal(e.key,e.target.selectionStart,e.target.value)) {
      e.preventDefault();
    }
  })
  $height.keypress(function(e) {
    if(!ilegal(e.key,e.target.selectionStart,e.target.value)) {
      e.preventDefault();
    }
  })

  //字段检验
  $width.focusout(function() {
    //if(!validate(width)) select this;
    if(!validate('#width')) $width.select();
  })

  $height.focusout(function() {
    //if(!validate(height)) select this;
    if(!validate('#height')) $height.select();
  })

  function ilegal(key,pos,con) {
    if(/[abcdf-zABCDF-Z`~!@#$%^&*()_+=[\]{}|;:'",<>?\\]/.test(key)){
     return false;
  }
  //关于小数点
  //小数点不能出现在数字的首位
  //小数点不能出现在小数里
  //小数点不能出现在负号和eE后面
  if(key === '.') {
    if(pos === 0) return false;

    if(con.indexOf('.') !== -1) return false;

    if(pos > 0 && /[-eE]/.test(con.slice(0,pos))) return false;
  }

  //合法字符e
  //允许出现在非科学计数法的数字末尾
  //允许出现在非科学计数法的数字中间
  //不允许出现在非科学计数法的数字前面
  //不允许出现在空文本中
  //不允许出现在负号后面
  //不允许出现在科学记数法数字的前面
  //不允许出现在科学记数法数字的中间
  //不允许出现在科学记数法的末尾
  if(key==='e' || key==='E'){
    if(pos === 0) return false;
    if(con.indexOf('e') !== -1 || con.indexOf('E') !== -1) return false;
    if(pos > 0 && /[-.]/.test(con.slice(pos - 1,pos))) return false;
    if(con.slice(pos,con.length).indexOf('.') !== -1) return false;
  }

  //合法字符：负号
  //符号不能出现在数字首位
  //负号不能出现在数字和小数点后面
  //负号不能出现多次
  if(key === '-') {
    if(pos === 0) return false;
    if(pos > 0 && /[0-9]/.test(con.slice(pos - 1,pos))) return false;
    if(pos > 0 && con.indexOf('-') !== -1) return false;
  }
  return true;
}

  function validate(field) {
    //获得错误信息
    var $data = $(field),
        $msg = $(field + '-validation');
    //validate null
    if($data.val()===''){
      if($data.selector === '#width'){
        $msg.html('宽度不能为空！')
        $data.select();//select就是设置焦点
        return false;
      }
      else{
        $msg.html('高度不能为空！')
        $data.select();
        return false;
      }
      return false;
    }
    //validate number
    if(!/^-?(0|[1-9]\d*)(\.\d*)?([eE][+-]?\d+)?$/.test($data.val())){
      $msg.html('必须是数值！');
      $data.select();//select就是设置焦点
      return false;
    } 
    //validate > 0
    if(Number($data.val()) <= 0){
      $msg.html('必须大于零！');
      $data.select();//select就是设置焦点
      return false;
    }
    $msg.html('');
    return true;
    //不满足返回错误
    //满足返回true
  }
})
